<template>
  <div class="environment-info">
    <CardBox title="环境监测">环境监测</CardBox>
    <div class="content-container">
      <div class="env-layout">
        <!-- 左侧大数据 -->
        <div class="env-main">
          <div class="env-chart" ref="airQualityChart"></div>
          <div class="env-chart-content">
            <div class="air-value fonts-DIN">{{AQI}}</div>
            <div class="air-level">{{Quality}}</div>
          </div>
          <div class="env-footer">
            <div class="env-title">空气质量指数</div>
            <div class="air-time fonts-DIN">更新时间：{{ updateTime }}</div>
          </div>
        </div>
        <!-- 右侧小数据 -->
        <div class="env-grid">
          <div class="env-item">
            <div class="item-content">
              <div class="env-value fonts-DIN">{{ results["temperature"] }}℃</div>
              <div class="env-label">温度</div>
            </div>
          </div>
          <div class="env-item">
            <div class="item-content">
              <div class="env-value fonts-DIN">{{ results["humidity"] }}%</div>
              <div class="env-label">湿度</div>
            </div>
          </div>
          <div class="env-item">
            <div class="item-content">
              <div class="env-value fonts-DIN">{{ results["windPower"] }}m/s</div>
              <div class="env-label">风速</div>
            </div>
          </div>
          <div class="env-item">
            <div class="item-content">
              <div class="env-value fonts-DIN">
                {{ results["pm25"] }}μg/m³
              </div>
              <div class="env-label">PM2.5</div>
            </div>
          </div>
          <div class="env-item">
            <div class="item-content">
              <div class="env-value fonts-DIN">{{ results["pm10"] }}μg/m³</div>
              <div class="env-label">PM10</div>
            </div>
          </div>
          <div class="env-item">
            <div class="item-content">
              <div class="env-value fonts-DIN">
                {{ results["co"] }}ppm
              </div>
              <div class="env-label">CO</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import CardBox from "@/components/Global/CardBox.vue";
import axios from 'axios';
let that;
export default {
  name: "EnvironmentInfo",
  components: {
    CardBox,
  },
  data() {
    return {
      updateTime: "",
      airQualityChart: null,
      AQI:"",
      Quality:"",
      results: {
        time: "",
      },
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.getData();
      this.timer = setInterval(function () {
        that.getData();
      }, 300000);
    });
  },
  created() {
    that = this;
  },
  beforeDestroy() {
    if (this.airQualityChart) {
      this.airQualityChart.dispose();
      this.airQualityChart = null;
    }
    if (this.timer !== null) {
      clearInterval(this.timer);
      this.timer = null; // 确保定时器引用被清除，防止内存泄漏
    }
  },
  methods: {
    getData() {
      const currentDate = new Date();
      const year = currentDate.getFullYear();
      const month = currentDate.getMonth() + 1; // 月份从0开始，需要加1
      const day = currentDate.getDate();
      const hours = String(currentDate.getHours()).padStart(2, "0");
      const minutes = String(currentDate.getMinutes()).padStart(2, "0");
      const seconds = String(currentDate.getSeconds()).padStart(2, "0");
      this.updateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      this.$api.device.getEnvironmentalMonitoring().then((res) => {
        this.results = res;
      });
      this.$api.device.getLiveInfo().then((res) => {
        this.Quality = res.Quality;
        this.AQI = res.AQI;
        this.initAirQualityChart();
      });
    },
    initAirQualityChart() {
      if (!this.$refs.airQualityChart) {
        return;
      }

      const chart = echarts.init(this.$refs.airQualityChart);
      const option = {
        backgroundColor: "transparent",
        series: [
          {
            type: "gauge",
            radius: "100%",
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false,
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#6A8DAC",
                    },
                    {
                      offset: 1,
                      color: "#007EFF",
                    },
                  ],
                },
              },
            },
            axisLine: {
              lineStyle: {
                width: 8,
                color: [[1, "rgba(0,150,255,0.1)"]],
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            data: [
              {
                value: this.AQI,
                detail: {
                  show: false,
                },
              },
            ],
            detail: {
              show: false,
            },
            title: {
              show: false,
            },
          },
        ],
      };

      chart.setOption(option);
      this.airQualityChart = chart;
    },
  },
};
</script>
<style lang="scss" scoped>
.environment-info {
  margin-bottom: 20px;
  border-radius: 4px;
  width: 100%;
  position: relative;
  .content-container {
    height: 294px;
    .env-main {
      width: 168px;
      height: 22 2px;
    }
    .env-chart {
      width: 150px;
      height: 150px;
    }
    .env-grid {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      .env-item {
        padding: 10px 0px;
        justify-content: flex-start;
        .item-content {
          background-size: 32px 27px;
          background-position: 0 0;
          text-align: left;
          div {
            text-indent: 40px;
          }
        }
        &:nth-child(1) {
          .item-content {
            background: url("@/assets/img/monitor-1.png") no-repeat;
          }
        }
        &:nth-child(2) {
          .item-content {
            background: url("@/assets/img/monitor-2.png") no-repeat;
          }
        }
        &:nth-child(3) {
          .item-content {
            background: url("@/assets/img/monitor-3.png") no-repeat;
          }
        }
        &:nth-child(4) {
          .item-content {
            background: url("@/assets/img/monitor-4.png") no-repeat;
          }
        }
        &:nth-child(5) {
          .item-content {
            background: url("@/assets/img/monitor-5.png") no-repeat;
          }
        }
        &:nth-child(6) {
          .item-content {
            background: url("@/assets/img/monitor-6.png") no-repeat;
          }
        }
      }
    }
    .env-chart-content {
      top: 35%;
      left: 50%;
    }
  }
}
</style>